// v1: 通过原生 js 创建 dom 节点
// // 创建 div 节点
// const dom = document.createElement('div');
// // 设置 id
// dom.id = 'app';
// // 获取 root 节点
// document.querySelector('#root').appendChild(dom);
// // 添加文本节点
// const textEl = document.createTextNode('Hello World!');
// // 添加文本节点到 div 节点
// dom.appendChild(textEl);

// v2:
// 将上面写的 dom 树抽离出来，变成一个 vdom 对象
// const textEl = {
//     type: 'TEXT_ELEMENT',
//     props: {
//         nodeValue: 'Hello World!',
//         children: [],
//     },
// };

// const el = {
//     type: 'div',
//     props: {
//         id: 'app',
//         children: [textEl],
//     },
// };

// 和上面类似，只是将 v1 中写死的数据改动态的
// const dom = document.createElement(el.type);
// dom.id = el.props.id;
// document.querySelector('#root').appendChild(dom);
// const text = document.createTextNode(textEl.props.nodeValue);
// dom.appendChild(text);

// 此时的 dom 结构如下：
/**
    root
    └── div #app
        └── text
            └── Hello World!
 */

// v3：通过递归的方式创建 dom 树
// function createTextNode(text) {
//     return {
//         type: 'TEXT_ELEMENT',
//         props: {
//             nodeValue: text,
//             children: [],
//         },
//     };
// }

// function createElement(type, props, ...children) {
//     return {
//         type,
//         props: {
//             ...props,
//             children: children.map(child => (typeof child === 'object' ? child : createTextNode(child))),
//         },
//     };
// }

// function render(element, container) {
//     // 根据 element 的 type 来创建 dom
//     const dom = element.type === 'TEXT_ELEMENT' ? document.createTextNode('') : document.createElement(element.type);
//     // 设置属性
//     Object.keys(element.props).forEach(name => {
//         // 除了 children 属性，其他属性都直接设置到 dom 上
//         if (name !== 'children') {
//             dom[name] = element.props[name];
//         }
//     });
//     // 递归渲染子节点
//     element.props.children.forEach(child => render(child, dom));
//     // 将 dom 添加到 container
//     container.appendChild(dom);
// }

// const App = createElement('div', { id: 'app' }, 'hello mini-react');
// const root = document.querySelector('#root');

// // render(App, root);

// const ReactDom = {
//     createRoot(rootContainer) {
//         return {
//             render(App) {
//                 render(App, rootContainer);
//             }
//         }
//     }
// }

// ReactDom.createRoot(root).render(App);

// v4:last
import React from './core/React.js';
import ReactDom from './core/ReactDom.js';
import App from './App.jsx';

const root = document.querySelector('#root');

console.log('App ---->', App);
ReactDom.createRoot(root).render(App);
